<template>
	<view class="choose">
		<view class="choose-title">距离2021高考还剩123天</view>
		<view class="choose-content">
			<image src="../../static/mb.png" mode=""></image>
			<view class="choose-content-text">树立目标，发现差距！</view>
			<view class="">
				<u-field
					v-model="schoolName"
					@input="showAction"
					class="choose-input"
					placeholder="请填学校名称"
				>
					<u-button size="mini" slot="right" @click="goto('../pages/index')">搜索</u-button>
				</u-field>
			</view>
			<view class="school-list" v-if="schoolList.length>0">
				<view class="school-item" v-for="(item,index) in schoolList" :key="index" @click="goto('../pages/index')">
					{{item.text}}
				</view>
			</view>
		</view>
		<view class="choose-bg">
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow: true,
				schoolName: '',
				schoolList: []
			}
		},
		onLoad() {
	
		},
		methods: {
			/** 搜索 */
			showAction(e) {
				console.log(e)
				this.schoolList = [
					{text: '华南理工大学 （本科一批）'},
					{text: '华南理工大学 （本科一批）'}
				]
			},
			goto(name) {
				uni.reLaunch({
					url: '../index/index?schoolId=1'
				});
			}
		},
		watch: {
			schoolName: function(newVal, oldVal) {
				console.log(newVal)
			}
		}
	}
</script>

<style lang="less">
	.choose {
		height: 360rpx;
		background-color: #45b688;
		padding: 30rpx;
		.choose-title {
			color: #FFFFFF;
			text-align: right;
		}
		.choose-content {
			box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 3px 0px;
			border-radius: 16px;
			background-color: #FFFFFF;
			text-align: center;
			padding-bottom: 60rpx;
			margin-top: 40rpx;
			image {
				width: 100rpx;
				height: 100rpx;
				margin-top: 40rpx;
				margin-bottom: 20rpx;
			}
			.choose-content-text {
				font-size: 40rpx;
				margin-bottom: 50rpx;
			}
		}
		.school-list {
			margin: 0 60rpx;
			padding-bottom: 30rpx;
			background-color: #F1F1F1;
			.school-item {
				padding-top: 20rpx;
				text-align: left;
				padding-left: 20rpx;
			}
		}
		.choose-bg {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 300rpx;
			background: url(../../static/school.png) no-repeat;
			background-size: 100% 100%;
		}
	}
</style>
